import { defineStore } from 'pinia'
import axios from 'axios'
import { nanoid } from 'nanoid'
import { reactive } from 'vue'

// export const useTalkStore = defineStore('talk', {
//   // 真正存储数据的地方
//   state() {
//     return {
//       // talkList: localStorage.getItem("talkList") // 拿到数据 是字符串
//       talkList: JSON.parse(localStorage.getItem('talkList')) || [] // 如果 localStorage.getItem('talkList') 返回 null，则将 talkList 初始化为空数组

//     }
//   },
//   actions: {
//     async getATalk() {
//       let result = await axios.get('http://api.uomg.com/api/rand.qinghua?format=json')
//       // // 使用 await 关键字可以使代码在异步操作完成后再继续执行，而不是立即执行下一行代码。这样可以确保在获得异步操作的结果后，再进行下一步的处理。
//       // // console.log(result.data.content);
//       // //把字符串包装为对象
//       let obj = {
//         id: nanoid(), // 生成一个随机字符串id
//         title: result.data.content
//       }
//       this.talkList.unshift(obj)
//     }
//   }
// })

// 组合式写法
export const useTalkStore = defineStore('talk', () => {
  //-----------------数据------------------
  const talkList = reactive(
    JSON.parse(localStorage.getItem('talkList')) || []
  )

  //--------------函数-------------------
  async function getATalk() {
    let result = await axios.get('http://api.uomg.com/api/rand.qinghua?format=json')
    let obj = {
      id: nanoid(), // 生成一个随机字符串id
      title: result.data.content
    }
    talkList.unshift(obj)
  }
  return { talkList, getATalk } // 要交出去
})